<template>
  <div class="l_o">
    <el-tabs v-model="activeName" class="namesss" @tab-click="handleClick">
      <el-tab-pane label="景点" name="first" class="aa">
        <Four_1/>
      </el-tab-pane>
      <el-tab-pane label="周边跟团游" name="second" class="aa">
        <Four_2/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import Four_1 from '../left/four/four_1.vue';
import Four_2 from '../left/four/four_2.vue';
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';

const activeName = ref('first');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style scoped>
/* 修改标签栏容器样式，设置背景为白色 */
:deep(.namesss .el-tabs__nav) {
  background-color: white !important;
  width: 100% !important;
  border-radius: 0 10px 0 0 !important;
}

/* 修改单个标签项样式，设置文字颜色为黑色 */
:deep(.namesss .el-tabs__item) {
  color: black !important;
  margin-right: 20px !important;
  width: 100% !important;

}

/* 修改激活标签项样式，设置背景为白色，文字颜色为黑色并加粗 */
:deep(.namesss .el-tabs__item.is-active) {
  background-color: white !important;
  width: 100% !important;

  color: black;
  font-weight: bold;
}

/* 修改激活标签指示器样式，设置为黑色 */
:deep(.namesss .el-tabs__active-bar) {
  background-color: #42D092 !important;
  height: 3px !important;

}

/* 去掉 el-tabs 内容区域默认内边距 */
:deep(.namesss .el-tabs__content) {
  padding: 0 !important;
}

/* 去掉单个标签项默认内边距（如果有需要） */
:deep(.namesss .el-tabs__item) {
  padding: 0 !important;
}
</style>